<template>
  <div class="view-wrapper">
    <div class="tabs-body">
      <div class="view-inner-wrap">
        <div class="name">活动名称：{{name}}</div>
        <div class="activityData">
          <div class="bt">活动数据：</div>
          <el-table :data="dataList" border style="width: 100%;margin-top:14px">
            <el-table-column prop="participateCount" align="center" label="总参与人数" />
            <el-table-column prop="inviteCount" align="center" label="总邀新人数" />
            <el-table-column prop="realitParticipateCount" align="center" label="实际参与人数" />
            <el-table-column prop="realityInviteCount" align="center" label="实际邀新人数" />
            <el-table-column prop="virtualParticipateCount" align="center" label="虚拟参与人数" />
            <el-table-column prop="virtualInviteCount" align="center" label="虚拟邀新人数" />
          </el-table>
        </div>
        <div class="activityData" >
          <div class="topBox">
             <div class="left">
                <div class="leftBtn mar-20">
                  <el-button size="small" type="primary" @click="addVirtualUsers">添加虚拟用户</el-button>
                </div>
                <el-form :inline="true" :model="queryParams" ref="queryForm" class="demo-form-inline">
                  <el-form-item label="" prop="query">
                    <el-input v-model="queryParams.query" placeholder="姓名/手机号" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="用户类型："  prop="customerType">
                    <el-select v-model="queryParams.customerType" placeholder="全部" size="small">
                      <el-option  :label="item.value" :value="item.id" v-for="(item,index) in customerTypeList" :key="index"></el-option>
                     
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button size="small" @click="handleQuery" type="primary">搜索</el-button>
                    <el-button size="small" @click="resetQuery">重置</el-button>
                  </el-form-item>
                </el-form>
            </div>
            <div >
              <el-button size="small" type="primary" @click="addConfig">自动添加配置</el-button>
              <el-button size="small" type="primary" @click="getList">刷新数据</el-button>
              <export-excel-button
                title="活动记录信息列表"
                action="/invite/activity/v1/record/export"
                :params="ExportParams"
              />
            </div>
          </div>
          <el-table :data="activityList" border style="width: 100%;" @sort-change='sortChange' >
            <el-table-column label="序号" type="index" width="55" align="center" fixed />
            <el-table-column prop="customerType" align="center" label="用户类型" :formatter="handleCustomerType"/>
            <el-table-column prop="customerPhone" align="center" label="手机号" />
            <el-table-column prop="customerName" align="center" label="姓名" />
            <el-table-column prop="inviteAmount" align="center" sortable="custom" label="邀请人数" />
            <el-table-column prop="totalInviteAmount" align="center" sortable="custom" label="总邀请人数" />
            <el-table-column prop="virtualInviteAmount" align="center" sortable="custom" label="虚拟邀请人数" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.virtualInviteAmount" placeholder="请输入" v-if="scope.row.isEdite"></el-input>
                <div v-if="!scope.row.isEdite">{{scope.row.virtualInviteAmount}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="date" align="center" label="操作">
                <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleSava(scope.row)" v-if="scope.row.isEdite">保存</el-button>
                <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="!scope.row.isEdite">修改</el-button>
                <el-button size="mini" type="text" @click="handleAuto(scope.row)" v-if="scope.row.isAuto == 1 && scope.row.customerType == 1">启用自动添加</el-button>
                <el-button size="mini" type="text" @click="handleAuto(scope.row)" v-if="scope.row.isAuto == 2 && scope.row.customerType == 1">关闭自动添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[10, 20, 30, 50,300,500,1000]"
            @pagination="getList" />
        </div>
      </div>
    </div>
    <add-diglog
      ref="childRef"
      v-if="detailDialog"
      :id="queryParams.activityId"
      :path="path"
      :visible.sync="detailDialog"
      @success="_handleSuccess" 
    />
    <config-diglog 
      v-if="configDiglog"
      :id="queryParams.activityId"
      :visible.sync="configDiglog"
      @success="_handleSuccess" 
    />
  </div>
</template>
<script>
import {
  activityStatistics,
  activityList,
  editActivity,
  adminDict,
  autoRecord
} from '@/api/inviteNew'
import addDiglog from './components/addDiglog'
import configDiglog from './components/configDiglog'
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  name: "",
  components: {
    addDiglog,
    configDiglog,
    ExportExcelButton
  },
  
  data() {
    return {
      detailDialog: false,
      configDiglog: false,
      id: '',
      name: '',
      activityList:[],
      customerTypeList: [],
      dataList: [],
      total: 0,
      queryParams:{
        query: '',
        customerType: '',
        activityId: '',
        sort: '',
        pageNum: 1,
        pageSize: 10,
      },
      
    };
  },
  watch: {
   
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.queryParams,
      };
      return params;
    },
  },
  created() {
    this.queryParams.activityId = this.$route.query.id
    this.name = this.$route.query.name
    this.getadminDict()
    this.getList()
    this.getDetail()
  },
  mounted() {
  
  },
  methods: {
    getadminDict() {
        //获取商户类型字典
        const params = {
          dictType: "invite_activity_record_customer_type",
        };
        adminDict(params).then((res) => {
          this.customerTypeList = res.result[0].dictList;
        });
      },
    //列表
    getList() {
      this.loading = true;
      const params = {
        ...this.queryParams,
      };
      activityList(params)
        .then((res) => {
          const { total, records } = res.result;
          console.log("账号列表", records);
          this.total = total;
          records.forEach(item => {
            item.isEdite = false
            return item
          });
          this.activityList = records 
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getDetail(){
     
      activityStatistics(this.queryParams.activityId)
        .then((res) => {
          this.dataList.push(res.result)
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //格式化类型
    handleCustomerType(row){
      if(row.customerType == 1){
        return '虚拟用户'
      }else if(row.customerType == 2){
        return '实际用户'
      }
    },
    handleEdit(row){       
      this.activityList.forEach(item => {
        if(item.id == row.id){
          item.isEdite = true
        }
      })
      // console.log('this.activityList',this.activityList)
    },
    handleSava(row){
      this.activityList.forEach(item => {
        if(item.id == row.id){
          item.isEdite = false
        }
      })
      this.editActivity(row)
    },
    //启用-停用自动添加
    handleAuto(row) {
      if(row.isAuto == 1){
        var title = '是否启用'
        var isAuto = 2
      }else if(row.isAuto == 2){
        var title = '是否停用'
        var isAuto = 1
      }
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          id: row.id,
          isAuto: isAuto
        }
        autoRecord(data).then(res => {
          this.$message({
            message: "操作成功",
            type: "success",
          }); 
          this.getList()
        })
      }).catch(() => {});
    },
    sortChange(column, prop, order) {
        //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
        console.log(column + '---' + column.prop + '---' + column.order)
        //输出的结果 [object Object]---name---ascending
        if(column.prop == 'inviteAmount'){
          if(column.order == 'ascending'){
            console.log('范德萨发')
            this.queryParams.sort = 1
          }else{
            this.queryParams.sort = 2
          }
        }else if(column.prop == 'virtualInviteAmount'){
           if(column.order == 'ascending'){
            this.queryParams.sort = 3
          }else{
            this.queryParams.sort = 4
          }
        }else if(column.prop == 'totalInviteAmount'){
           if(column.order == 'ascending'){
            this.queryParams.sort = 5
          }else{
            this.queryParams.sort = 6
          }
        }
        
        this.getList()
    },
    //保存
    editActivity(row){
      var data = {
        id: row.id,
        amount: row.virtualInviteAmount != '' ? row.virtualInviteAmount : 0,
      }
       editActivity(data).then(response => {
        if(response.code == 200){
          console.log('response',response)
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
        
      });
    },
    /* 添加虚拟用户 */
    addVirtualUsers(){
      this.detailDialog = true
    },
    /* 添加配置 */
    addConfig(){
      this.configDiglog = true
    },
    _handleSuccess(data) {
      console.log("data", data);
      this.queryParams.pageNum = 1
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.date = []
      console.log('this.queryParams', this.queryParams)
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}
.name{
  padding: 14px 0 0 0 ;
  font-size: 16px;
  color: #222;
}
.activityData{
  margin-top: 24px;
  .bt{
    font-size: 16px;
    color: #222;
  }
  .topBox{
    display: flex;
    justify-content: space-between;
    .left{
      display: flex;
      justify-content: flex-start;
    }
  }
}
.mar-20{
  margin-right: 20px;
}
</style>
